<template>
  <div class="publish-order">
    <x-header>发货</x-header>
    <group label-width="4em" label-margin-right="0.5em" label-align="right">
      <cell class="flex-auto" title="类型">
        <checker v-model="orderForm.type" default-item-class="default-item-class" selected-item-class="selected-item-class">
          <checker-item :value="item" v-for="(item, index) in typeList" :key="index">{{item.value}}</checker-item>
        </checker>
      </cell>
      <x-textarea title="内容" v-model="orderForm.content" placeholder="请输入内容"></x-textarea>
      <cell class="flex-auto" title="电话">
        <checker v-model="orderForm.phones" type="checkbox" default-item-class="default-item-class" selected-item-class="selected-item-class">
          <checker-item :value="item" v-for="(item, index) in phoneList" :key="index">{{item.value}}</checker-item>
        </checker>
      </cell>
      <x-input v-model="orderForm.fare" title="运费">
        <span slot="right">元</span>
      </x-input>
      <cell title="支付方式" class="payway">
        <popup-picker v-model="orderForm.payWay" popup-title="请选择" :data="payWayList">
        </popup-picker>
      </cell>
      <cell title="重发" class="resend">
        <popup-picker v-model="orderForm.resend" popup-title="请选择" :data="resendList"></popup-picker>
      </cell>
      <cell title="历史记录">
        <popup-picker v-model="currentHistoryRecords" popup-title="请选择" :data="historyOrderTitleList" @on-change="onHistoryTitleChange"></popup-picker>
      </cell>
      <cell title="箱量">
        <inline-x-number v-model="orderForm.boxAmount" style="display:block;" :min="1" width="50px" button-style="round"></inline-x-number>
      </cell>
    </group>
    <div class="btn-wrap">
      <x-button @click.native="publish" type="primary">发布</x-button>
    </div>
  </div>
</template>

<script>
import {
  XHeader,
  Group,
  Cell,
  XInput,
  Checker,
  CheckerItem,
  XTextarea,
  Checklist,
  XButton,
  PopupPicker,
  InlineXNumber
} from 'vux'
import { mapState, mapActions } from 'vuex'
import moment from 'moment'
export default {
  name: 'publishOrder',
  components: {
    XHeader,
    Group,
    Cell,
    XInput,
    Checker,
    CheckerItem,
    XTextarea,
    Checklist,
    XButton,
    PopupPicker,
    InlineXNumber
  },
  data () {
    return {
      currentHistoryRecords: [],
      payWayList: [
        ['现金结算', '一周内结算', '30天内结算', '平台支付']
      ],
      resendList: [
        ['不重发', '3分钟重发', '5分钟重发', '10分钟重发', '20分钟重发', '30分钟重发', '60分钟重发'],
        ['不重发', '一共重发1次', '一共重发2次', '一共重发3次', '一共重发5次', '一共重发8次', '一共重发10次', '一共重发15次', '一共重发20次']
      ],
      typeList: [
        { key: '1', value: '拼箱' },
        { key: '2', value: '散货' },
        { key: '3', value: '广告' }
      ],
      phoneList: [],
      orderForm: {
        boxAmount: 1,
        content: '',
        type: { key: '1', value: '拼箱' },
        payWay: ['现金结算'],
        resend: ['5分钟重发', '一共重发20次'],
        phones: [],
        fare: ''
      }
    }
  },
  computed: {
    ...mapState({
      user: state => state.user,
      historyOrderTitleList: state => state.order.historyOrderTitleList
    })
  },
  mounted () {
    if (this.user.Mobile1) {
      this.phoneList.push({key: 'Mobile1', value: this.user.Mobile1})
      this.orderForm.phones.push({key: 'Mobile1', value: this.user.Mobile1})
    }
    if (this.user.Mobile2) {
      this.phoneList.push({key: 'Mobile2', value: this.user.Mobile2})
    }
    if (this.user.Mobile3) {
      this.phoneList.push({key: 'Mobile3', value: this.user.Mobile3})
    }
    if (this.user.Phone1) {
      this.phoneList.push({key: 'Phone1', value: this.user.Phone1})
      this.orderForm.phones.push({key: 'Phone1', value: this.user.Phone1})
    }
    if (this.user.Phone2) {
      this.phoneList.push({key: 'Phone2', value: this.user.Phone2})
    }
    if (this.user.Phone3) {
      this.phoneList.push({key: 'Phone3', value: this.user.Phone3})
    }
  },
  methods: {
    publish () {
      const orderForm = this.orderForm
      if (!orderForm.content.trim()) {
        this.$vux.toast.show({
          text: '请输入内容'
        })
        return
      }
      if (orderForm.content.length < 4) {
        this.$vux.toast.show({
          text: '发箱内容不少于4个字'
        })
        return
      }
      const mobile1 = orderForm.phones.find(item => {
        return item.key === 'Mobile1'
      })
      const mobile2 = orderForm.phones.find(item => {
        return item.key === 'Mobile2'
      })
      const mobile3 = orderForm.phones.find(item => {
        return item.key === 'Mobile3'
      })
      const phone1 = orderForm.phones.find(item => {
        return item.key === 'Phone1'
      })
      const phone2 = orderForm.phones.find(item => {
        return item.key === 'Phone2'
      })
      const phone3 = orderForm.phones.find(item => {
        return item.key === 'Phone3'
      })
      const param = {
        MsgType: orderForm.type.key,
        PayWay: orderForm.payWay[0] === '平台支付' ? '1' : '0',
        balance: orderForm.fare,
        Address: this.user.Address,
        CompanyName: this.user.CompanyName,
        Brief: orderForm.content,
        Mobile1: mobile1 ? mobile1.value : '',
        Mobile2: mobile2 ? mobile2.value : '',
        Mobile3: mobile3 ? mobile3.value : '',
        Phone1: phone1 ? phone1.value : '',
        Phone2: phone2 ? phone2.value : '',
        Phone3: phone3 ? phone3.value : '',
        UserBrief: `(运费:${orderForm.fare || ''}元,${orderForm.payWay[0]})`,
        Times: orderForm.resend[1].replace(/[^0-9]/ig, ''),
        Interval: orderForm.resend[0].replace(/[^0-9]/ig, ''),
        SiteId: '2',
        num: orderForm.boxAmount,
        FullName: this.user.FullName,
        userid: this.user.UserId,
        ActionDate: moment(new Date()).format('YYYY-MM-DD HH:mm:ss')
      }
      this.publishOrder(param).then(order => {
        this.sendOrderMessage({
          Brief: order.Brief,
          UserBrief: order.UserBrief,
          DateUpdated: order.DateUpdated,
          MessageId: order.MessageId,
          SiteId: order.SiteId,
          State: '1',
          interval: order.interval,
          times: order.times
        })
        this.$router.push({
          path: '/main/home'
        })
        this.$vux.toast.text('发箱成功')
      })
    },
    onHistoryTitleChange (value) {
      this.orderForm.content = value[0]
    },
    ...mapActions({
      publishOrder: 'order/publishOrder',
      sendOrderMessage: 'order/sendOrderMessage'
    })
  }
}
</script>

<style lang="less">
.publish-order{
  .payway .weui-cell_access,
  .resend .weui-cell_access{
    padding: 0 15px !important;
  }
  .weui-cell.weui-check_label:first-child{
    padding-top: 0px !important;
    padding-bottom: 0px !important;
  }
  .weui-cell.weui-check_label:last-child{
    padding-bottom: 0px !important;
  }
  .weui-cells.weui-cells_checkbox:before{
    border-top: 0 !important;
  }
  .weui-cells.weui-cells_checkbox:after{
    border-bottom: 0 !important;
  }
  .flex-auto{
    .weui-cell__ft{
      flex: auto;
    }
  }
  .default-item-class{
    border: 1px solid #ececec;
    padding: 0 15px;
  }
  .selected-item-class{
    border: 1px solid green;
  }
  .btn-wrap{
    padding: 10px;
  }
}
</style>
